<!--  -->
<template>
    <div class="courseItem flex" @click="lecturerNav(datas.id,datas.goods_id)">
      <div class="courseItem-img">
        <van-image width="100%" height="100%"  radius="0.3125rem" :src="datas.cover || datas.thumb" fit="cover" />
        <slot name="imgTag"></slot>
        <!-- <img  /> -->
      </div>
      <div class="wrap" :class="(courseType === 2 || courseType === 3)?'flex-j-sb wrap-lecturer':''">
        <p class="title ell">{{datas.name || datas.title}}</p>
        <slot name="chapterLeft"></slot>
        <div class="flex-a-c chapter flex-j-sb" v-if="courseType === 1">
          <div class="chapter-left flex-a-c">
            <img class="chapter-img" :src="datas.lecturer && datas.lecturer.pic" />
            <span>{{datas.lecturer && datas.lecturer.name}}</span>
          </div>
          <div class="chapter-right">{{datas.chapter_count}}章{{datas.section_count}}节</div>
        </div>
        <div class="chapter-price flex">
          <div class="price" v-if="datas.price !== '0'"><span>￥</span>{{datas.price}}</div>
          <div class="price" v-else>免费</div>
          <div class="purchased" v-if="datas.sales">已购 {{datas.sales}}</div>
          <div class="purchased" v-if="datas.show_sales">已购 {{datas.show_sales}}</div>
        </div>
      </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Image as VanImage } from "vant";
export default {
name:'',
props:{
  datas:{
    type:Object,
    default:() => {
      return {}
    }
  },
  courseType: {
    type:Number
  }
},
//import引入的组件需要注入到对象中才能使用
components: {
  VanImage
},
data() {
return {

};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  lecturerNav(id,goodsId) {
    if(this.courseType === 2) {
      this.$router.push(this.fun.getUrl("goods", { id: id }));
    } else if(this.courseType === 1) {
      this.$router.push(this.fun.getUrl("goods", { id: goodsId }));
    } else {
      this.$router.push(this.fun.getUrl("goods", { id: goodsId }));
    }
  }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
/* 单行文本的溢出显示省略号 */
.pl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 定义显示的行数 */
  overflow: hidden;
}

/* @import url(); 引入公共css类 */
.courseItem {
  background-color: #fff;
  padding: 0.625rem 0.625rem 0.75rem 0.625rem;

  .courseItem-img {
    min-width: 6.25rem;
    width: 6.25rem;
    height: 6.25rem;
    position: relative;

    img {
      width: 100%;
      height: auto;
    }
  }

  .wrap-lecturer {
    flex-direction: column;
  }

  .wrap {
    width: 72%;
    box-sizing: border-box;
    padding-left: 0.625rem;

    .title {
      font-size: 0.9375rem;
      font-weight: 400;
      // line-height: 1.3125rem;
      color: #333;
      text-align: left;
    }

    .chapter {
      margin-top: 0.3125rem;
      background: rgba(75, 106, 167, 0.39);
      border-radius: 0.125rem;
      padding: 0.1875rem 0;

      .chapter-left {
        padding: 0 0 0 0.625rem;

        img {
          width: 1.25rem;
          height: 1.25rem;
          background: #fff;
          border-radius: 50%;
        }

        span {
          font-size: 0.875rem;
          font-weight: bold;
          color: #516ea9;
          line-height: 1.0625rem;
          padding-left: 0.375rem;
        }
      }

      .chapter-right {
        font-size: 0.8125rem;
        font-weight: 500;
        color: #516ea9;
        line-height: 1.0625rem;
        padding-right: 0.8125rem;
      }
    }

    .chapter-right {
      font-size: 13px;
      font-weight: 500;
      color: #516ea9;
      line-height: 17px;
      padding-right: 13px;
    }
  }

  .chapter-price {
    padding-top: 0.4375rem;
    align-items: flex-end;

    .price {
      padding-right: 0.4375rem;

      span {
        font-size: 0.75rem;
        font-weight: 800;
        color: #fd453f;
        line-height: 1.0625rem;
      }

      font-size: 1.125rem;
      font-weight: 800;
      color: #fd453f;
      line-height: 1.625rem;
    }

    .purchased {
      font-size: 0.75rem;
      font-weight: 500;
      color: #8a8c92;
      line-height: 1.3125rem;
    }
  }
}
</style>
